<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>烟园新冠疫苗预约小程序</title>
		<script src="js/mui.min.js"></script>

		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<div id="app">
			<div class="mui-card">

				<div class="mui-card-content"  style="padding: 10px;">
					<div  style="text-align: center;">烟园·烟台大学疫苗预约小程序</div>
				</div>
			</div>

			<div class="mui-card">


				<form class="query_card mui-input-group">
					<div class="mui-input-row">
						<label>姓名</label>
						<input v-model="name" type="text" class="mui-input-clear" placeholder="请输入姓名">
					</div>
					<!--
					<div class="mui-input-row">·
						<label>学号</label>
						<input :value="studentnum" type="text" class="mui-input-clear" placeholder="非学生可为空">
					</div>
					-->
					<div class="mui-input-row">
						<label>预留手机号</label>
						<input v-model="phone" type="text" class="mui-input-clear" placeholder="请输入接种预留手机号">
					</div>
					<div class="mui-button-row">
						<button type="button" @click="query_my_time"
							class="mui-btn mui-btn-primary query">查询我的可预约时段</button>
					</div>
					<div class="mui-row" style="text-align: center;">
						<p>仅开放了最近两天预约数据</p>
					</div>
				</form>
			</div>

			<div class="mui-card timecard">
				<!--标题-->
				<div class="mui-card-header">可预约时段</div>
				<!--内容区-->
				<div class="mui-card-content" v-if="iszero==1">
					<div class="mui-text-center">很遗憾，未到您的接种时间。</div>
				</div>
				<div class="mui-card-content" v-if="iszero==0">

					<div class="mui-card atimecard" v-for="item in data">

						<div class="mui-card-header" style="color: #000000; font-size: 14px;">
							接种时间：{{item.start_time}} <br>结束时间：{{item.end_time}}

						</div>
						<div class="mui-card-header" style="color: #000000; font-size: 14px;">
							<span v-if="item.manufacturer==1">厂家：科兴</span>
							<span v-else>厂家：国药</span>
							<div style="color: red;">
								<div v-if="item.is_first_dose==1">第一针</div>
								<div v-else>第二针</div>
							</div>
						</div>


						<div class="mui-card-header" style="color: #000000; font-size: 14px;">
							可预约{{item.doses_available}}人/已预约{{item.doses_reserved}}人
							<button v-if="item.doses_available-item.doses_reserved>0"
								style="background-color: royalblue; color: #FFFFFF;"
								@click="confirm(item.id)">确认预约</button>
							<button v-else @click="zeroleftnum"
								style="background-color: gray;color: #FFFFFF;">名额已满</button>
						</div>
					</div>

				</div>

				<!--页脚，放置补充信息或支持的操作-->

				<div class="mui-card-footer">
					<img src="img/logo.png" style="width: auto; height: 30px; ">

					烟园开发团队提供技术支持
				</div>
			</div>
		</div>
	</body>
</html>
<script src="./js/vue.js"></script>
<script src="./js/axiox.min.js"></script>
<!-- 引用Vue.js-->
<style>
	.atimecard {
		margin-bottom: 15px;
		margin-top: 15px;
	}

	.query_card {
		padding-top: 5px;
		background-color: #FFFFFF;
	}

	.query {
		width: 60%;
	}
</style>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			url: "https://test.tabt.cc:81",
			message: 'Hello Vue!',
			name: "xxy",
			studentnum: "",
			phone: "1234568",
			data: [],
			btn_mes: '确认预约',
			iszero: 1
		},
		methods: {
			query_my_time: function() {
				var that = this;
				console.log("查询")
				//查询我的可预约时段
				if (this.name == "" || this.phone == "") {
					alert('请输入表单数据！');
					return;
				}
				console.log(this.url + '/api/fetchList?name=' + this.name + '&phone=' + this.phone)
				axios({
					method: 'get',
					url: this.url + '/api/fetchList?name=' + this.name + '&phone=' + this.phone
				}).then(function(res) {
					console.log('data:', res.data);
					if (res.data.success == 0) {
						that.iszero = 1;
						return;
					} else
						that.iszero = 0;
					var res_json = JSON.parse(JSON.stringify(res.data.list));

					console.log(res_json);
					that.data = res_json;

					that.$forceUpdate();
					//that.query_my_time();
				});
				that.$forceUpdate();

			},
			confirm: function(id) {
				var that = this;

				mui.confirm('您是否确认选择要预约此时间段？', '确认预约', ['取消', '确认'], function(e) {

					if (e.index == 0) {
						//取消
						console.log("取消");
						return;
					} else {
						//确认vaccine
						console.log("确认");
						//console.log(that.url + '/api/reserve?name=' + that.name + '&phone=' + that.phone+'&vaccine='+id)
						axios({
							method: 'POST',
							url: that.url + '/api/reserve/',
							data: {
								name: that.name,
								phone: that.phone,
								vaccine: id
							}
						}).then(function(res) {
							console.log('data:');
							var res_json = JSON.parse(JSON.stringify(res.data));
							console.log(res_json);
							that.query_my_time();
							if (res_json.success == 1) {
								alert('预约成功');
							} else {
								alert('预约失败，返回信息：'+res_json.msg);
							}


						});



					}
					return;

				}, 'div')("")

			},
			zeroleftnum: function() {
				mui.toast('名额已满，无法预约', {
					duration: 'long',
					type: 'div'
				})

			}
		},

	})
	allowed = 0;
	if (allowed == 0) {

	}
</script>
